.ol-popup {
  display: none;
  position: relative;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  min-width: 250px;
  min-width: 10vw;
  max-width: 16vw;
  z-index: 1;
  &:after,
  &:before {
    top: 100%;
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    left: 50%;
  }
  &:after {
    border-top-color: white;
    border-width: 10px;
    margin-left: -10px;
  }
  &:before {
    border-top-color: #cccccc;
    border-width: 11px;
    margin-left: -11px;
  }
  &.ol-popup-bottom-right {
    right: -30px;
    top: -10px;
  }
  &.ol-popup-bottom-right:before,
  &.ol-popup-bottom-right:after {
    left: unset;
    right: 20px;
  }
  &.ol-popup-bottom-left {
    left: -20px;
    top: -15px;
  }
  &.ol-popup-bottom-left:before,
  &.ol-popup-bottom-left:after {
    left: 20px;
  }

  &.ol-popup-bottom-center {
    top: -10px;
  }

  &.ol-popup-top-center {
    top: 25px;
  }
  &.ol-popup-top-center:before,
  &.ol-popup-top-center:after {
    top: -22px;
  }
  &.ol-popup-top-center:before {
    border-top-color: transparent;
    border-bottom-color: #cccccc;
    border-width: 10px;
    margin-left: -10px;
  }
  &.ol-popup-top-center:after {
    border-top-color: transparent;
    border-bottom-color: white;
    border-width: 11px;
    margin-left: -11px;
  }

  &.ol-popup-top-left {
    left: 15px;
    top: -20px;
  }
  &.ol-popup-top-left:before,
  &.ol-popup-top-left:after {
    top: 15px;
    left: -11px;
  }
  &.ol-popup-top-left:before {
    border-top-color: transparent;
    border-right-color: #cccccc;
    border-width: 10px;
    margin-left: -10px;
  }
  &.ol-popup-top-left:after {
    border-top-color: transparent;
    border-right-color: white;
    border-width: 11px;
    margin-left: -11px;
  }
  &.ol-popup-top-right {
    right: 15px;
    top: -20px;
  }
  &.ol-popup-top-right:before,
  &.ol-popup-top-right:after {
    top: 15px;
    right: -11px;
    left: unset;
  }
  &.ol-popup-top-right:before {
    border-top-color: transparent;
    border-left-color: #cccccc;
    border-width: 11px;
    margin-right: -11px;
  }
  &.ol-popup-top-right:after {
    border-top-color: transparent;
    border-left-color: white;
    border-width: 10px;
    margin-right: -9px;
  }
}
// ------------通用 简单标注：overlay style
.ol-lable {
  display: none;
  position: absolute;
  background-color: #165fcd;
  opacity: 0.8;
  /* -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); */
  box-shadow: 0px 1px 6px 0px rgba(51, 128, 243, 0.2);
  padding: 8px 4px;
  border-radius: 4px;
  border: 1px solid #083a84;
  bottom: 12px;
  left: -50px;
  max-width: 200px;
  z-index: 99;
  color: #fff;
  text-align: center;
  &:after,
  &:before {
    top: 100%;
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-top-color: rgba(72, 111, 170, 0.8);
    left: 48px;
    margin-left: -11px;
    border-width: 11px;
  }
}
